<template>
  <view
    class="item-content"
    v-if="attrs.visibleFlag"
  >
    <view
      v-if="!attrs?.customLabel"
      class="label"
      :style="{ width: attrs?.width ? attrs?.width + 'rpx' : 'auto' }"
      >{{ attrs?.label }}:</view
    >
    <view
      v-else
      class="label"
      :style="{ width: attrs?.width ? attrs?.width + 'rpx' : 'auto' }"
    >
      <slot :name="attrs?.customLabel" :prop="prop" :data="data" />
    </view>
    <view v-if="!attrs?.customValue" class="value right-content">{{
      data[prop] || emptyValue
    }}</view>
    <view v-else class="value right-content">
      <slot />
    </view>
  </view>
</template>
<script lang="ts" setup>
import { useAttrs } from 'vue';
const props = defineProps<{
  prop: string;
}>();
const { prop } = toRefs(props);
const injectData: any = inject('describe');
const { data, emptyValue } = injectData || {};
const attrs = useAttrs();
</script>
<style lang="scss" scoped>
.item-content {
  display: flex;
  align-items: top;
  justify-content: space-between;
  margin-bottom: 20rpx;

  .label {
    text-align: left;
    color: #999;
  }
  .right-content {
    flex: 1;
    width: 0;
    margin-left: 20rpx;
  }
  .value {
    text-align: right;
    color: #333;
    word-break: break-all;
  }
}
</style>
